<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2019-10-17 19:25:40
 * @LastEditTime: 2020-04-21 23:50:35
 * @FilePath: \blog-pages\src\views\AboutMe.vue
 * @Description: 关于我页面
 -->

<template>
  <div class="comm-con">
    <nav-bar></nav-bar>
    <b-container class="main bg-img">
      <b-row>
        <b-col cols="12" sm="12" md="12" lg="12" xl="12">
          <b-media>
            <template v-slot:aside>
              <b-img :src="profile.avatar" width="64" alt="placeholder"></b-img>
            </template>

            <h5 class="mt-0">{{profile.name}}</h5>
            <p>{{profile.motto}}</p>
          </b-media>
        </b-col>
        <b-col cols="12" sm="12" md="12" lg="12" xl="12">
          <hr />
          <h5>内心独白</h5>
          <p v-html="profile.introduction"></p>
        </b-col>
      </b-row>
    </b-container>
    <Footer></Footer>
  </div>
</template>

<script>
import showdown from "showdown";
import urls from "@/request/url";
export default {
  name: "AboutMe",
  data() {
    return {
      profile: {}
    };
  },
  components: {
    Footer: () => import("@/components/Footer"),
    NavBar: () => import("@/components/NavBar")
  },
  activated() {
    this.$axios.get(urls.comm.profile).then(res => {
      this.profile = res.data;
      let converter = new showdown.Converter({
        parseImgDimensions: true
      });
      this.profile.introduction = converter.makeHtml(this.profile.introduction);
    });
  }
};
</script>

<style scoped>
h5 {
  margin-top: 20px;
  text-align: left;
  font-size: 20px;
}
</style>